<template>
	<!-- 新增一个空的占位控件，防止也页面滑动时内容被底部导航栏遮挡 -->
	<view :style="{'height': nHeight+'px' }"></view>
	<view :style="{'position':'fixed', 'width': '100%', 'top':'0px', 'z-index':'998' }">
		<uni-nav-bar dark :fixed="true" :shadow="shadow" backgroundColor="#3851f6" :border="border" status-bar
			:leftCustomPrefix="leftCustomPrefix" :left-icon="leftIcon" :left-text="leftText" :title="title"
			@clickLeft="back" :rightCustomPrefix="rightCustomPrefix" :right-icon="rightIcon" :rightWidth="rightWidth"
			@clickRight="_clikeRight" >
			
			<template v-slot:left>
				<slot name="left"></slot>
			</template>
			
			<template v-slot:right>
				<slot name="right"></slot>
			</template>
			</uni-nav-bar>
	</view>

</template>

<script>
	/**
	 * @description 顶部导航栏
	 */
	export default {
		name: "newNavBar",
		emits: ['clikeRight'],
		props: {
			// 是否显示右侧筛选框
			rightIcon: {
				type: String,
				default: ''
			},
			//自定义变量左侧字体图标类
			leftCustomPrefix: {
				type: String,
				default: ""
			},
			//自定义变量右侧字体图标类
			rightCustomPrefix: {
				type: String,
				default: ""
			},
			shadow: {
				type: [Boolean, String],
				default: true
			},
			border: {
				type: [Boolean, String],
				default: true
			},
			height: {
				type: [Number, String],
				default: 44
			},
			rightWidth: {
				type: [Number, String],
				default: 60
			}
		},
		data() {
			return {
				// navBarData:getApp().globalData.navBarData,
				title: '',
				titleLeftShow: '',
				leftIcon: '',
				leftText: '',
				nHeight: 44
			}
		},
		mounted() {
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.nHeight = this.height + statusBar
				}
			})
			this.title = getApp().globalData.navBarData.titleBar;
			this.titleLeftShow = getApp().globalData.navBarData.titleShowLeft;
			this.leftIcon = getApp().globalData.navBarData.leftIcon;
			this.leftText = getApp().globalData.navBarData.leftText;
		},
		methods: {
			//返回上一个界面
			back() {
				if (this.titleLeftShow) {
					let canNavBack = getCurrentPages()
					if (canNavBack && canNavBack.length > 1) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						//如果刷新页面当前页面的路由信息会丢失，所以只能通过原生js的方法退回上一页面
						history.back();
					}
				}
			},
			_clikeRight() {
				//声明注册一个右按钮点击事件
				this.$emit('clikeRight', {})
			}
		}
	}
</script>

<style>

</style>
